<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>阿金美业</title>
<link rel="stylesheet" type="text/css"
	href="${ctx }/resource/css/reset.css">
<link rel="stylesheet" type="text/css"
	href="${ctx }/resource/css/style.css">
<script type="text/javascript" src="${ctx }/resource/js/lib/rem.js"></script>
</head>
<body>
	<section class="aui-flexView">
		<section class="aui-scrollView">
			<div class="aui-works-head b-line">
				<h2>今日预约</h2>
			</div>
			<c:if test="${fn:length(beksDay)==0 }">
				<div class="aui-flex-empty">
          		暂无预约
        		</div>
			</c:if>
			<c:if test="${fn:length(beksDay)>0 }">
			<c:forEach items="${beksDay }" var="daybek">
				<div class="aui-flex">
					<div class="aui-works-user">
						<div class="bg"
							style="background-image: url(${ctx }/resource/img/topPic/${daybek.worker.pic.path })"></div>
						<span class="aui-works-user-tags">${daybek.worker.name }</span>
					</div>
					<div class="aui-flex-box">
						<h2>服务项目：${daybek.services.title}</h2>
						<p class="appoint-time">
							预约时间：<fmt:formatDate pattern="HH:mm" value="${daybek.date}" /></span>
						</p>
						<p>美发师:${daybek.worker.name }</p>
					</div>
					<div class="aui-works-price">
						<span onclick="iscancel(${daybek.id});" class="aui-works-price-in">取消预约</span>
						 <span class="aui-works-price-te">会员8折</span>
					</div>
				</div>
			</c:forEach>
			</c:if>
			<!-- 今日预约 -->
			<div class="divHeight"></div>
			<div class="aui-works-head b-line">
				<h2>本周预约</h2>
			</div>
			<div class="aui-flex-wrap">
			<c:forEach items="${beks }" var="weekbek">
			<fmt:formatDate var='dateweek' value="${weekbek.date}" pattern="E"></fmt:formatDate>
			<fmt:formatDate var='week' value="${weekbek.date}" pattern="yyyy-MM-dd"></fmt:formatDate>
			<fmt:formatDate var='nowWeek' value="${nowDate}" pattern="yyyy-MM-dd"></fmt:formatDate>
				<div class="aui-flex">
					<div class="aui-works-user">
						<div class="bg"
							style="background-image: url(${ctx }/resource/img/topPic/${weekbek.worker.pic.path })">

						</div>
						<span class="aui-works-user-tags">${weekbek.worker.name }</span>
					</div>
					<div class="aui-flex-box">
						<h2>服务项目：${weekbek.services.title}</h2>
						<div class="aui-img-lou">
							<em>${weekbek.worker.name }</em> <em><img
								src="${ctx }/resource/img/icon-tags-img.png" alt=""></em> <em>|${dateweek }</em>
						</div>
					</div>
					<div class="aui-works-price">
						<c:if test="${ nowWeek<=week}">
							<span onclick="iscancel(${weekbek.id});" class="aui-works-price-in remove-appoint">取消预约</span> 
						</c:if>
						<c:if test="${ nowWeek>week}">
							<span class="aui-works-price-in">已过期</span> 
						</c:if>
						<span class="aui-works-price-te">${week }</span>
					</div>
				</div>
			</c:forEach>
				<a href="MonthList?vipId=${vip.id }" class="more">查看本月预约情况</a>
			</div>
			<!--  <div class="aui-flex-empty">
          暂无预约
        </div> -->
			<div class="divHeight"></div>
		</section>
		  <%@ include file="../../common/foot.jsp"%>
	</section>
</body>
  <script type="text/javascript" src="${ctx }/resource/js/lib/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		function iscancel(id){
			console.log(id);
			 $.post("cancelService",{id:id},function(data){
			    	if(data.code==1){
			    		window.location.href = "oauthList";
			    	}
			    });
		}
	</script>
</html>